<template>
  <div
    style="
      background-color: white;
      width: 100%;
      height: 100%;
      padding: 20px 20px;
    "
  >
    <div class="flex-row" style="align-items: center">
      <div class="vertical-line" style="height: 22px"></div>
      <h3 style="margin: 0px 0px">修改教师信息</h3>
    </div>
    <div class="form" style="margin-top: 20px; width: 60%; overflow-y: scroll;height: 85%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="username">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="学校" prop="university">
          <el-select v-model="ruleForm.university" placeholder="请选择学校">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学院" prop="department">
          <el-select v-model="ruleForm.department" placeholder="请选择学院">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-select v-model="ruleForm.major" placeholder="请选择专业">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职称" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="个人主页" prop="personPage">
          <el-input v-model="ruleForm.personPage"></el-input>
        </el-form-item>
        <el-form-item label="研究方向" prop="searchWay">
          <el-tag
            :key="tag"
            v-for="tag in ruleForm.searchWay"
            closable
            :disable-transitions="false"
            @close="handleCloseSearch(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="searchVisible"
            v-model="searchInput"
            ref="searchTag"
            size="small"
            @keyup.enter.native="handleInputConfirm1"
            @blur="handleInputConfirm1"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput1"
            >+ New Tag</el-button
          >
        </el-form-item>
        <el-form-item label="个人介绍" prop="introduce">
          <el-input v-model="ruleForm.introduce"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script>
export default {
    data() {
        return {
            // 研究方向的tag
            searchInput:'',
            searchVisible : false,
            // 兴趣爱好的输入tag
            inputVisible: false,
            inputValue: '',
            ruleForm: {
                name: '',
                university: '',
                department:'',
                major: '',
                title:'',
                personPage:'',
                searchWay: ['人工智能', '数据挖掘', '深度学习'],
                introduce:'',
            },
            rules: {
                name: [
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                university: [
                    { required: true, message: '请选择学校', trigger: 'change' }
                ],
                department: [
                    { required: true, message: '请选择学院', trigger: 'change' }
                ],
                major: [
                    { required: true, message: '请选择专业', trigger: 'change' }
                ],
                searchWay: [
                    { required: true, trigger: 'change' }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }, 
        handleCloseSearch(tag) {
            this.ruleForm.searchWay.splice(this.ruleForm.searchWay.indexOf(tag), 1);
        },
        handleCloseHobby(tag) {
            this.ruleForm.hobby.splice(this.ruleForm.hobby.indexOf(tag), 1);
        },
        showInput1() {
            this.searchVisible = true;
            this.$nextTick(_ => {
                this.$refs.searchTag.$refs.input.focus();
                console.log(_)
            });
        },
        showInput2() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.hobbyTag.$refs.input.focus();
                console.log(_)
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.ruleForm.hobby.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        handleInputConfirm1() {
            let inputValue = this.searchInput;
            if (inputValue) {
                this.ruleForm.searchWay.push(inputValue);
            }
            this.searchVisible = false;
            this.searchInput = '';
        }
    }
}

</script>

<style scoped>
.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
.form::-webkit-scrollbar {
  display: none;
}
</style>
